<script setup lang="ts">
import { ref, onMounted, reactive, computed } from 'vue';
import { NextLoading } from '/@/utils/loading';
import { ElMessage } from 'element-plus';
import { verifyPhone } from '/@/utils/toolsValidate';
import { useLoginApi } from '/@/api/login.js';

const lxsAppData = reactive({
	loading: {
		signIn: false,
	},
	loginData: {
		code: '',
		avatar: 'https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/xcx/login/avatar.png',
		nickname: '',
		mobile: '', // 手机号码
		password: '',
		password_form: '',
		captcha: '', // 短信验证码
	},
	captchaRegisterData: { // 验证码数据
		btnTip: '获取验证码', // 验证码提示
		time: 60, // 时长
		flag: 0, // 是否点击
		light: 0, // 输入手机号亮标
	},
	tips: {
		avatar: '',
		nickname: '',
		mobile: '', // 手机号码
		password: '',
		password_form: '',
		captcha: '', // 短信验证码
	}
})

const passLight = ref(false); // 密码是否显示
// 点击密码显示隐藏
const passLightClick = () => {
	passLight.value = passLight.value == false;
}

// 切换登录
const emits = defineEmits(['switchType'])
const loginShow = (param: any) => {
	emits('switchType', param);
}

// 发送验证码
const sendCaptchaRegister = async () => {
	if (lxsAppData.captchaRegisterData.flag == 0) {
		lxsAppData.captchaRegisterData.flag = 1;
		let time = lxsAppData.captchaRegisterData.time;

		try {
			await useLoginApi().sendCaptchaSubmit({mobile: lxsAppData.loginData.mobile}).then(data => {
				console.log('发送验证码结果', data);
				if (data?.data?.captcha) {
					lxsAppData.loginData.captcha = data?.data?.captcha;
				}
				if (data.code === 200) {
					const m = setInterval(() => {

						lxsAppData.captchaRegisterData.btnTip = --time + 'S后重新获取';

						if (time <= 0) {
							clearInterval(m);
							lxsAppData.captchaRegisterData.btnTip = '发送验证码';
							lxsAppData.captchaRegisterData.flag = 0;
						}
					}, 1000);
				} else {
					ElMessage.error(data.message)

					lxsAppData.captchaRegisterData.flag = 0;
				}
			})
		} catch (e) {
			lxsAppData.captchaRegisterData.flag = 0;
		}
	}
};

// 输入框验证
const handleInput = (type: string) => {
	if (type == 'nickname') {
		if (lxsAppData.loginData.nickname.length < 2 || lxsAppData.loginData.nickname.length > 20) {
			lxsAppData.tips.nickname = '昵称长度为2-20位'
			return;
		} else {
			lxsAppData.tips.nickname = ''
		}
	} else if (type == 'mobile') {
		if (lxsAppData.loginData.mobile == '') {
			lxsAppData.captchaRegisterData.light = 0;
		} else {
			lxsAppData.captchaRegisterData.light = 1;
		}
		if (!verifyPhone(lxsAppData.loginData.mobile)) {
			lxsAppData.tips.mobile = '手机号格式不正确'
			return;
		} else {
			lxsAppData.tips.mobile = ''
		}
	} else if (type == 'password') {
		if (lxsAppData.loginData.password.length < 6 || lxsAppData.loginData.password.length > 20) {
			lxsAppData.tips.password = '密码长度为6-20位'
			return;
		} else {
			lxsAppData.tips.password = ''
		}
	} else if (type == 'password_form') {
		if (lxsAppData.loginData.password !== lxsAppData.loginData.password_form) {
			lxsAppData.tips.password_form = '两次密码不一致'
			return;
		} else {
			lxsAppData.tips.password_form = ''
		}
	} else if (type == 'captcha') {
		if (!lxsAppData.loginData.captcha) {
			lxsAppData.tips.captcha = '请输入验证码'
			return;
		} else {
			lxsAppData.tips.captcha = ''
		}
	}
}


// 注册
const loginRegister = async () => {
	if (lxsAppData.loginData.nickname === '') {
		lxsAppData.tips.nickname = '请输入昵称'
		return;
	} else {
		lxsAppData.tips.nickname = ''
	}
	if (!verifyPhone(lxsAppData.loginData.mobile)) {
		lxsAppData.tips.mobile = '手机号格式不正确'
		return;
	} else {
		lxsAppData.tips.mobile = ''
	}
	if (lxsAppData.loginData.password.length < 6 || lxsAppData.loginData.password.length > 20) {
		lxsAppData.tips.password = '密码长度为6-20位'
		return;
	} else {
		lxsAppData.tips.password = ''
	}
	if (lxsAppData.loginData.password !== lxsAppData.loginData.password_form) {
		lxsAppData.tips.password_form = '两次密码不一致'
		return;
	} else {
		lxsAppData.tips.password_form = ''
	}
	if (!lxsAppData.loginData.captcha) {
		lxsAppData.tips.captcha = '请输入验证码'
		return;
	} else {
		lxsAppData.tips.captcha = ''
	}
	lxsAppData.loading.signIn = true;
	try {
		await useLoginApi().registerSubmit(lxsAppData.loginData).then(data => {
			lxsAppData.loading.signIn = false;
			if (data.code === 200) {
				ElMessage.success(data.message)
				loginShow(0)
			} else {
				ElMessage.error(data.message)
				return;
			}
		})
	} catch (e) {
		lxsAppData.loading.signIn = false;
		console.log(e);
	}
}
</script>

<template>
	<form class="login-form">
		<div>
			<div class="login-animation">
				<el-input class="el-input" placeholder="请输入昵称" @input="handleInput('nickname')" v-model="lxsAppData.loginData.nickname" autocomplete="off">
					<template #prefix>
						<img style="width: 20px; height: 20px;" src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/login/%E6%88%91%E7%9A%84%E6%98%B5%E7%A7%B0.png" alt="">
					</template>
				</el-input>
			</div>
			<view class="form-tips" v-if="lxsAppData.tips.nickname !== ''">
				<p>{{ lxsAppData.tips.nickname }}</p>
			</view>
		</div>

		<div>
			<div class="login-animation">
				<el-input class="el-input" placeholder="请输入手机号" @input="handleInput('mobile')" v-model="lxsAppData.loginData.mobile" autocomplete="off">
					<template #prefix>
						<img style="width: 20px; height: 20px;" src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/login/%E6%89%8B%E6%9C%BA.png" alt="">
					</template>
				</el-input>
			</div>
			<view class="form-tips" v-if="lxsAppData.tips.mobile !== ''">
				<p>{{ lxsAppData.tips.mobile }}</p>
			</view>
		</div>

		<div>
			<div class="login-animation">
				<el-input class="el-input" :type="passLight ? 'text' : 'password'" placeholder="密码长度6-20字符" @input="handleInput('password')" v-model="lxsAppData.loginData.password" autocomplete="off">
					<template #prefix>
						<img style="width: 20px; height: 20px;" src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/login/%E5%AF%86%E7%A0%81.png" alt="">
					</template>
				</el-input>


				<img v-if="passLight" class="pass-light" src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/login/View_alt_light.png" alt="" @click="passLightClick">
				<img v-else class="pass-light" src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/login/View_hide_light.png" alt="" @click="passLightClick">
			</div>
			<view class="form-tips" v-if="lxsAppData.tips.password !== ''">
				<p>{{ lxsAppData.tips.password }}</p>
			</view>
		</div>

		<div>
			<div class="login-animation">
				<el-input class="el-input" :type="passLight ? 'text' : 'password'" placeholder="请确认密码" @input="handleInput('password_form')" v-model="lxsAppData.loginData.password_form" autocomplete="off">
					<template #prefix>
						<img style="width: 20px; height: 20px;" src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/login/%E5%AF%86%E7%A0%81.png" alt="">
					</template>
				</el-input>


				<img v-if="passLight" class="pass-light" src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/login/View_alt_light.png" alt="" @click="passLightClick">
				<img v-else class="pass-light" src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/login/View_hide_light.png" alt="" @click="passLightClick">
			</div>
			<view class="form-tips" v-if="lxsAppData.tips.password_form !== ''">
				<p>{{ lxsAppData.tips.password_form }}</p>
			</view>
		</div>

		<div>
			<div class="login-animation flex flex-between">
				<el-input class="el-input el-captcha" placeholder="请输入验证码" @input="handleInput('captcha')" v-model="lxsAppData.loginData.captcha" autocomplete="off">
					<template #prefix>
						<img style="width: 20px; height: 20px;" src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/login/%E9%AA%8C%E8%AF%81%E7%A0%81.png" alt="">
					</template>
				</el-input>
				<div class="verify-text" :class="{'verify-text-active' : lxsAppData.captchaRegisterData.flag, 'verify-text-light': lxsAppData.captchaRegisterData.light}" @click="sendCaptchaRegister">{{ lxsAppData.captchaRegisterData.btnTip }}</div>
			</div>
			<view class="form-tips" v-if="lxsAppData.tips.captcha !== ''">
				<p>{{ lxsAppData.tips.captcha }}</p>
			</view>
		</div>

		<div class="mt30">
			<el-button class="login-submit" @click="loginRegister" :loading="lxsAppData.loading.signIn">注册</el-button>
		</div>
	</form>
</template>

<style scoped lang="scss">
.login-form {
	margin-top:20px;

	.login-animation {
		margin-top:25px;
		height: 44px;
		position: relative;

		.el-input {
			width: 100%;
			height: 44px;

			:deep(.el-input__wrapper) {
				box-shadow: none !important;
				background: #F4F4F4;
				border-radius: 5px 5px 5px 5px;
				border: 1px solid #ECECEC;
			}
			.el-input__wrapper {
				--el-input-focus-border-color: #FC661C;
			}
		}

		.el-captcha {
			width: 64% !important;
		}

		.verify-text {
			border: none;
			width: 118px;
			height: 44px;
			background: rgba(252,102,28,0.5);
			border-radius: 5px 5px 5px 5px;
			color: #fff;
			text-align: center;
			line-height: 44px;
			transition: all 0.2s ease;
			cursor: pointer;
		}
		.verify-text:active {
			background: #FC661C;
		}
		.verify-text:hover {
			background: #FC661C;
		}
		.verify-text-active {
			background-color: #999999;
		}
		.verify-text-light {
			background: rgba(252,102,28,0.8);
		}

		.pass-light {
			width: 24px;
			height: 24px;
			position: absolute;
			right: 14px;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.login-submit {
		border: none !important;
		color: #FFFFFF;
		width: 380px;
		height: 48px;
		line-height: 48px;
		margin: 0 auto;
		text-align: center;
		background: #FC661C;
		border-radius: 5px 5px 5px 5px;
		font-family: Microsoft YaHei, Microsoft YaHei;
		font-weight: 400;
		font-size: 16px;
		color: rgba(255,255,255,0.8);
		font-style: normal;
		text-transform: none;
		cursor: pointer;
		box-shadow: skew(-10deg);
		transition: all 0.1s ease;
	}
	.login-submit:hover {
		background-color: #FFCFB8;
	}
	.login-submit:active {
		letter-spacing: 0px;
		transform: skew(-4deg) translateY(4px);
		background-color: #FFCFB8;
	}
}
</style>